/**
* 使用方法。
* 在页面适当的位置，添加一个div
* <div id="divId"></div>
* 然后编写js
* var f = new Filter("divId");
* var opt = [];
* f.setOption(opt);
* 
* 回调函数参数是： 选择的元素本身，info
* f.onSelect(func1);
* f.onUnselect(func2);
* f.onSelectOneName(func3);
* f.onUnselectOneName(func4);
* f.onSelectAll(func5);
* 
* f.show();
* f.collapse();
* 
* opt格式：
* var opt = [{
* 	name:'线路',
*	items:[
*		{name:'青八甲线',title:'5个',unselect:true},
*		{name:'青八乙线'},
*		{}
*	]},{..},{..}];
*info格式：
*var item = {
						name:"线路",
						selectedAll:false,
						selectedItems:[opt里面的item]
				};
*/

(function (window,$){
	window.CheckboxGroup = function(id){
		var SELECT_ALL_CLASS = "select_all";
		var SELECT_ITEM_CLASS = "select_item";

		//有一些 事件：全选事件，选择事件，不选择事件
		var option = [];
		var changeFunc = undefined;
		var quanxuan = '全选';

		var ele = undefined;

		function collapse(){
			ele.collapse('toggle');
		}
		function draw(){
			ele = $('#'+id);
			ele.addClass("panel-collapse collapse checkbox-group");
			ele.html('');

			var tb = $("<table></table>").appendTo(ele);
			tb.addClass("table");

			var tbody = $("<tbody></tbody>").appendTo(tb);
			for(var i =0;i<option.length;i++){
				var o = option[i];
				var tr = $("<tr></tr>").appendTo(tbody);
				$('<td class="col-sm-1 ">'+o.name+'</td>').appendTo(tr);
				var td2 = $('<td class="col-sm-1"><label><input type="checkBox" data-series="'+o.name+'" class="'+SELECT_ALL_CLASS+'" />'+quanxuan+'</label></td>').appendTo(tr);
				var td3 = $('<td ></td>').appendTo(tr);

				if(!o.items || o.items.length == 0){
					$('无').appendTo(td3);
					td2.attr('disabled','disabled');
				}else{
					var selectAll = true;
					for(var j=0;j<o.items.length;j++){
						var item = o.items[j];
						var label = $('<label></label>').appendTo(td3);

						var input = $('<input type="checkbox"></input>').appendTo(label);
						input.attr('name',o.name);
						input.addClass(SELECT_ITEM_CLASS);
						if(!item.unselect){
							input.attr('checked','checked');
						}else{
							selectAll = false;
						}
						input.attr('value',item.name);

						var span = $('<span>'+item.name+'</span>').appendTo(label);
						if(item.title){
							span.attr('title',item.title);
						}
					}
					if(selectAll){
						td2.find('.'+SELECT_ALL_CLASS)[0].checked = 'checked';
					}
				}
			}
			
			//添加单选事件
			ele.on('change','.'+SELECT_ITEM_CLASS,function(item){
				checkSelectAllByItem();
				var info = getCurrentInfo();
				changeFunc(info);
			});
			//多选
			ele.on('change','.'+ SELECT_ALL_CLASS,function(item){
				checkItemBySelectAll();
				if(!item.target.checked){
					changeToUnselect($(item.target).attr('data-series'));
				}
				var info = getCurrentInfo();
				changeFunc(info);
			});
		}
		function changeToUnselect(name){
			var trs = ele.find('tr');
			for(var i=0;i<option.length;i++){
				if(name == option[i].name){
					var items = $(trs[i]).find('input[type="checkbox"]');
					for(var j=0;j<items.length;j++){
						items[j].checked = undefined;
					}
				}
			}
		}
		function checkSelectAllByItem(){
			var trs = ele.find('tr');

			for(var i=0;i<option.length;i++){

				var selectAll = true;
				var ts = $(trs[i]).find('.'+SELECT_ITEM_CLASS);
				for(var j=0;j<ts.length;j++){
					if(!ts[j].checked){
						selectAll = false;
					}
				}
				var q = $(trs[i]).find('.'+SELECT_ALL_CLASS);
				if(selectAll){
					q[0].checked = 'checked';
				}else{
					q[0].checked = undefined ;
				}
			}
		}
		/**
		 * 将全选按钮的子，全部标记为选中
		 */
		function checkItemBySelectAll(){
			var trs = ele.find('tr');
			
			for(var i=0;i<option.length;i++){
				
				var q = $(trs[i]).find('.'+SELECT_ALL_CLASS);
				if(q[0].checked){
					selectByName(option[i].name);
				}
			}
		}
		function getCurrentInfo(){
			var info = [];
			//拿到他下面所有的全选元素的状态信息
			var trs = ele.find('tr');
			for(var i=0;i<option.length;i++){
				var item = {
						name:option[i].name,
						selectedAll:false,
						selectedItems:[]
				};
				info.push(item);
				var q = $(trs[i]).find('.'+SELECT_ALL_CLASS);
				if(q[0].checked){
					item.selectAll = true;
					item.selectedItems = option[i].items;
				}else{
					var ts = $(trs[i]).find('.'+SELECT_ITEM_CLASS);
					for(var j=0;j<ts.length;j++){
						if(ts[j].checked){
							item.selectedItems.push(option[i].items[j]);
						}
					}
				}
			}
			return info;
		}
		
		function selectByName(name){
			var trs = ele.find('tr');
			for(var i=0;i<option.length;i++){
				if(name == option[i].name){
					var items = $(trs[i]).find('input[type="checkbox"]');
					for(var j=0;j<items.length;j++){
						items[j].checked = 'checked';
					}
				}
			}
			//不触发选择事件-----------------------------------------------
		}
		function selectAll(){
			var checkboxs = ele.find('input[type="checkbox"]');
			for(var i=0;i<checkboxs.length;i++){
				checkboxs[i].checked = 'checked';
			}
			//不触发选择事件-----------------------------------------------
		}
		function selectItem(name,itemName){
			var trs = ele.find('tr');
			for(var i=0;i<option.length;i++){
				if(name == option[i].name){
					var items = $(trs[i]).find('input[type="checkbox"]');
					for(var j=0;j<items.length;j++){
						if(items[j].value == itemName){
							items[j].checked = 'checked';
						}
					}
				}
			}
			//不触发选择事件-----------------------------------------------
			
		}
		
		function onChange(callback){
			changeFunc = callback;
		}
		function mergeOption(newOption){
			if(!newOption){
				throw "option不可用";
			}
			option = newOption;
		}
		function setSelectAllLabel(label){
			quanxuan = label;
		}
		return {
			setOption:function(newOption){
				mergeOption(newOption);
			},
			onChange:function(callback){
				onChange(callback);
			},
			getInfo:function(){
				return getCurrentInfo();
			},
			draw:draw,
			collapse:collapse,
			setSelectAllLabel:function(label){
				setSelectAllLabel(label);
			},
			selectAll:function(){
				selectAll();
			},
			selectOneName:function(name){
				selectByName(name);
			},
			selectItem:function(name,itemName){
				selectItem(name,itemName);
			},
			unselectOneName:function(name){
				changeToUnselect(name);
			}
		};
	};
})(this,jQuery);